<template>
  <!-- 企业详情 -->
  <view class="passBusinessDetails">
    <view class="bgColor"></view>

    <scroll-view
      class="root-inner"
      scroll-y
      :style="{ height: scrollViewHeight + 'px' }"
    >
      <view class="wrapper">
        <view class="blueTitle">
          <view class="wrapper-bar" style="height: auto">
            <view class="wrapper-bartitle">
              <image :src="baseImgUrl + 'qi-icon.png'" mode=""></image>
              {{ detail.companyInfo.companyName }}
            </view>
          </view>
        </view>

        <view class="wrapper-item wrapper-zero">
          <view class="wrapper-facility">
            <view class="facility-item">
              <view class="textAlign label">标准地址：</view>
              <view class="value valueName">
                {{ detail.companyInfo.standardAddress || "" }}
                <text class="logout" v-if="detail.companyInfo.fzxbs === '1'"
                  >已注销</text
                >
              </view>
            </view>
          </view>
          <!-- <view class="wrapper-facility">
            <view class="facility-item">
              <view class="textAlign label">详细地址：</view>
              <view class="value valueName">
                {{ detail.companyInfo.addressDetail }}
              </view>
            </view>
          </view> -->
          <view class="text-picture">
            <view class="lt">
              <view class="wrapper-facility">
                <view class="facility-item">
                  <view class="textAlign label">所属分类：</view>
                  <view class="value valueName">
                    {{ detail.informationInfo.informationName }}
                  </view>
                </view>

                <view class="facility-item">
                  <view class="textAlign label">所属辖区：</view>
                  <view class="value valueName">
                    {{ detail.sysPoliceAgencyInfo.jurisdictionName || "无" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label">责任民警：</view>
                  <view class="value valueName">
                    {{ detail.sysPoliceAgencyInfo.userName || "暂未分配" }}
                  </view>
                </view>
              </view>
            </view>
            <view class="rt">
              <image
                :src="
                  companyStatus == 2
                    ? baseImgUrl + 'self-state3.png'
                    : baseImgUrl + 'self-state4.png'
                "
                mode=""
              ></image>
            </view>
          </view>
        </view>

        <view class="wrapper-item">
          <view class="wrapper-bar">
            <view class="wrapper-bartitle"> 基础功能 </view>
          </view>
          <view style="padding-top: 20rpx"><u-line></u-line></view>
          <view class="wrapper-body list-wrapper">
            <view
              class="item funItem"
              v-for="(item, index) in funClassifyList"
              :key="index"
              @click="funSkipHandle(item)"
            >
              <image class="img" :src="item.icon"></image>
              <view class="text">{{ item.text }}</view>
            </view>
          </view>
        </view>

        <!-- <view class="wrapper-item">
          <view class="wrapper-bar">
            <view class="wrapper-bartitle"> 特色功能 </view>
          </view>
      
          <view style="padding-top: 20rpx"><u-line></u-line></view>
          <view class="wrapper-body">
            <view class="list-wrapper">
              <view class="item" v-for="(item, index) in tercelList" :key="index"
                :data-url="`${item.miniRouteUrl}?companyMessageId=${detail.companyInfo.id}&companyName=${detail.companyInfo.companyName}`"
                @click="handleClickRouter" style="margin-bottom: 40rpx">
                <image class="img-icon" :src="imgPrefix + item.iconUrl" v-if="index > 1"></image>
                <image class="img-icon" :src="imgPrefix + item.iconUrl" v-else></image>
                <view class="text">{{ item.industryFeaturesName }}</view>
              </view>
            </view>
            <view v-if="!tercelList.length" class="feature-class">
              <image :src="baseImgUrl + 'home-empty.png'" mode=""></image>
              <view>您的企业暂无特色功能</view>
            </view>
          </view>
        </view> -->
        <view
          class="last-check-wrapper"
          v-for="(item, index) in lastRecord"
          :key="index"
        >
          <view class="title-text">
            <view class="l-text"> 最近一次检查 </view>
            <view
              class="r-wrapper"
              :data-url="
                item.checkResult == 1
                  ? `/goOverBag/goPass/goPass?taskId=${item.id}`
                  : `/goOverBag/belowtheMark/nonGoover?taskId=${item.id}`
              "
              @click="handleClickRouter"
            >
              查看详情>
            </view>
          </view>
          <view class="c-item">
            <view class="c-label"> 检查类型： </view>
            <view class="c-value">
              {{ item.industryExamineName }}
            </view>
          </view>
          <view class="c-item">
            <view class="c-label"> 检查民/辅警： </view>
            <view class="c-value">
              {{ item.policeUserName }}
            </view>
          </view>
          <view class="c-item">
            <view class="c-label"> 检查时间： </view>
            <view class="c-value">
              {{ item.checkTime }}
            </view>
          </view>
          <view class="c-item">
            <view class="c-label"> 检查结果： </view>
            <view class="c-value">
              {{ item.checkResult == 1 ? "合格" : "不合格" }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="check-btn" id="btn-dom">
      <view
        class="check-btn-style"
        v-if="['inspectionTask', undefined].includes(routerParams.action)"
        @click="handleStartCheck"
      >
        开始检查
      </view>
      <view
        class="check-btn-style"
        v-if="routerParams.action === 'recheck'"
        @click="handleStartReheck"
      >
        开始复查
      </view>
    </view>

    <view class="sign-wait-box">
      <u-modal
        :show="showWait"
        width="680rpx"
        :showConfirmButton="false"
        @cancel="handleCancel"
      >
        <view class="sifn-info-wrapper">
          <view class="title-text"> 提醒 </view>
          <image
            class="l-img"
            :src="baseImgUrl + 'sign-lock.png'"
            mode=""
          ></image>
          <view class="company-name">
            {{ detail.companyInfo.companyName }}
          </view>
          <view class="l-text">
            有{{ waitSignCount }}份责任书未签署， 请提醒企业尽快签署！
          </view>
          <view class="l-sub-text" @click="showWait = false"> 知道了 </view>
        </view>
      </u-modal>
    </view>
    <view
      class="popup-style"
      :style="{ visibility: showCheckItem ? 'unset' : 'hidden' }"
    >
      <view
        class="tenant-info-wrapper"
        :style="{ height: checkTop + 'px', top: checkTopValue + 'px' }"
      >
        <view class="" id="tenant-info-wrapper-dom">
          <view class="top-title">
            <view class="p-title">请选择本次检查类型</view>
          </view>
          <uni-icons
            type="closeempty"
            size="20"
            class="close-icon"
            @click="showCheckItem = false"
          ></uni-icons>
          <view class="p-container">
            <view
              class="select-box-wrapper"
              v-bind:style="{ height: selectHeieght + 'px' }"
            >
              <u-radio-group v-model="currentType" placement="row">
                <view
                  class="p-item"
                  @click="handleSelect(item.id, item.industry_examine_name)"
                  v-for="(item, index) in inspectionList"
                  :key="index"
                >
                  <view
                    class="p-item-wrapper"
                    :class="{ 'p-active': currentType === item.id }"
                  >
                    <view class="p-item-l">
                      <view class="p-name">
                        {{ item.industry_examine_name }}
                      </view>
                      <view class="p-text">
                        {{
                          `${item.category}种类别，${item.checkItems}个检查项`
                        }}
                      </view>
                    </view>
                    <u-radio
                      :name="item.id"
                      activeColor="#2488F5"
                      label=" "
                    ></u-radio>
                  </view>
                </view>
              </u-radio-group>
            </view>
            <view class="p-button" id="p-button">
              <u-button
                :customStyle="customSubmitStyleFull"
                @click="handleConfim"
                type="primary"
                text="确定"
                shape="circle"
                color="#2488F5"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { findWaitSignCount, inspectionCategory } from "../api/api";
import { getRole } from "../config";
import { getAction, postAction } from "../utils/request";
import { featuredIndustry } from "@/api/home.js";
import {
  companyChangeDetail,
  messageDetail,
  userFindResponsible,
} from "@/api/myself.js";
import {
  handleClickRouter,
  isLoading,
  pvwImage,
  Toast,
  customSubmitStyleFull,
  navTo,
  computedDistance,
  getposition,
  getLocation,
  navBack,
  getOptionsParams,
} from "@/utils/util.js";

export default {
  data() {
    const role = getRole();
    // const role = "mj";
    return {
      customSubmitStyleFull,
      baseImgUrl: this.$baseImgUrl,
      detail: {},
      options: {},
      imgPrefix: uni.getStorageSync("imgPrefix"),
      personImage: "", // 法人照片
      companyStatus: "", //状态   1.审核中 2.审核通过 3.审核失败 4.退出纳管
      //   基础功能
      funClassifyList: [
        {
          id: 1,
          text: "注册信息",
          value: 0,
          icon: this.$baseImgUrl + "passIcon_1.png",
          url: "/selfInfo/myBusiness/businessDetails",
        },
        {
          id: 3,
          text: "场所信息",
          value: 0,
          icon: this.$baseImgUrl + "passIcon_3.png",
          url: "/businessPremises/bpremisesInfo/bpremisesInfo",
        },
        {
          id: 7,
          text: "从业人员",
          value: 0,
          icon: this.$baseImgUrl + "passIcon_6.png",
          url: "/featureFun/staffInfo/staffInfo",
        },
        {
          id: 4,
          text: "安防信息",
          value: 0,
          icon: this.$baseImgUrl + "infowhi_icon1.png",
          url: "/securityInfor/securityMessage/securityMessage",
        },
        {
          text: "检查记录",
          value: 0,
          icon: this.$baseImgUrl + "passIcon_5.png",
          url: "/selfInfo/goover/goover",
        },
        {
          id: 5,
          text: "责任书",
          value: 0,
          icon: this.$baseImgUrl + "passIcon_4.png",
          url: "/selfInfo/liabilityStatement/liabilityStatement",
        },
        {
          id: 8,
          text: "安全演练",
          value: 0,
          icon: this.$baseImgUrl + "passIcon_8.png",
          url: "/fireFighting/fireSkits/fireSkits",
        },
        {
          id: 9,
          text: "安全培训",
          value: 0,
          icon: this.$baseImgUrl + "passIcon_9.png",
          url: "/fireFighting/fireDrill/fireDrill",
        },
      ],
      // 特色功能
      tercelList: [],
      whiteUrlList: [
        "/featuredIndustries/pawnRecordList/pawnRecordList",
        "/featuredIndustries/junkList/junkList",
        "/featuredIndustries/bulkOil/bulkOil",
        "/featuredIndustries/secondHandMobile/secondHandMobile",
        "/featuredIndustries/unblanking/unblanking",
      ],
      show: false,
      showCheckItem: false,
      currentType: "",
      checkName: "",
      timer: null,
      role: role,
      inspectionList: [],
      lastRecord: [],
      showWait: false,
      waitSignCount: 0,
      routerParams: {},
      scrollViewHeight: 0,
      systemInfo: {},
      checkButtonHeight: 0,
      btnKey: 0,
      popupRef: null,
      checkTop: 0,
      selectHeieght: 0,
      checkTopValue: 0,
    };
  },
  computed: {
    showLastCheck() {
      return ["mj"].includes(this.role) && !!this.lastRecord.length;
    },
  },
  async onLoad(options) {
    this.routerParams = getOptionsParams(options);
    console.log(this.routerParams);
    this.options = options;
    // 判断如果是检查任务，则取任务数据中的 企业 Id
    if (this.routerParams.action === "inspectionTask") {
      this.options.id = this.routerParams.companyId;
    }
    // 复查
    else if (this.routerParams.action === "recheck") {
      this.options.id = this.routerParams.companyId;
    } else {
      // 检查
      this.options.id = this.routerParams.id;
    }
    this.getList(this.options.id);
    //  this.role = uni.getStorageSync('role')
    // this.features();
    if (["fj"].includes(this.role)) {
      // 获取检查项
      this.getInspectionCategory();
      // 获取最近一次检查激励
      this.getLastCheckRecord();
    }
  },
  onReady() {
    const systemInfo = uni.getSystemInfoSync();
    const windowHeight = systemInfo.windowHeight;
    this.systemInfo = systemInfo;

    uni
      .createSelectorQuery()
      .select("#btn-dom")
      .boundingClientRect((rect) => {
        const { height } = rect;
        const scrollHeight = windowHeight - height;
        this.scrollViewHeight = scrollHeight;
      })
      .exec();
    this.checkTop = parseInt(windowHeight * 0.6);
    this.checkTopValue = parseInt(windowHeight * 0.4);
    this.computedSelectHeight();
  },
  onShow() {
    const params = {
      companyId: this.options.id,
    };
    findWaitSignCount(params).then((res) => {
      this.waitSignCount = res.result.waitSignCount;
      if (this.waitSignCount > 0) {
        this.showWait = true;
      }
    });
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    handleClickRouter,
    pvwImage,
    funSkipHandle(v) {
      if (v.id == 1) {
        uni.navigateTo({
          url: `${v.url}?id=${this.options.id}`,
        });
        return;
      }

      if (v.id == 2) {
        userFindResponsible({
          companyId: this.options.id,
        }).then((res) => {
          if (res.code == 200 && res.result.responsible) {
            uni.navigateTo({
              url: `${v.url}?id=${this.options.id}`,
            });
          } else {
            Toast("您当前不是管理员");
          }
        });
        return;
      }

      if (v.id == 6) {
        uni.switchTab({
          url: v.url,
        });
        return;
      }

      if (v.id == 3 || v.id == 4 || v.id == 7) {
        uni.navigateTo({
          url: `${v.url}?companyMessageId=${this.options.id}`,
        });
        return;
      }

      uni.navigateTo({
        url: `${v.url}?companyId=${this.detail.companyInfo.id}`,
      });
    },
    features() {
      featuredIndustry({
        companyMessageId: this.options.id,
      }).then((res) => {
        if (res.code == 200) {
          // 辅警网格员过滤掉 不展示的行业信息
          this.tercelList = res.result || [];
          this.tercelList = this.tercelList.filter(
            (item) => !this.whiteUrlList.includes(item.miniRouteUrl)
          );
        }
      });
    },
    getList(id) {
      if (this.options.homeon) {
        companyChangeDetail({
          changeId: id,
        }).then((res) => {
          if (res.code == 200) {
            this.companyStatus = res.result.auditInfo.companyStatus;
            this.detail = res.result;
            this.personImage = res.result.legalInfo.personImage
              ? this.imgPrefix + res.result.legalInfo.personImage
              : "";
          }
        });
        return false;
      }
      isLoading();
      messageDetail({
        companyId: id,
      })
        .then((res) => {
          if (res.code == 200) {
            this.companyStatus = res.result.auditInfo.companyStatus;
            this.detail = res.result;
            this.personImage = res.result.legalInfo.personImage
              ? this.imgPrefix + res.result.legalInfo.personImage
              : "";
          }
        })
        .finally(() => {
          isLoading(false);
        });
    },
    handleStartCheck() {
      // 检测当前位置和企业的位置距离
      // 之前保存的实有单位的位置
      const p1 = {
        lat: this.detail.companyInfo.lat,
        lng: this.detail.companyInfo.lng,
      };
      if (!p1.lat) {
        Toast("当前单位无经纬度信息！");
        return;
      }
      this.showCheckItem = true;
    },
    handleStartReheck() {
      const p1 = {
        lat: this.detail.companyInfo.lat,
        lng: this.detail.companyInfo.lng,
      };
      if (!p1.lat) {
        Toast("当前单位无经纬度信息！");
        return;
      }
      navTo({
        url: "/venueInspection/reinspection",
        params: {
          ...this.routerParams,
          companyMessageId: this.options.id,
          companyInfo: this.detail.companyInfo,
        },
      });
    },
    handleContinue() {
      this.show = false;
      // 如果是检查的话，则弹出选择检查项的选项
      if (this.routerParams.action === "recheck") {
        // 跳转到复查页面
        navTo({
          url: "/venueInspection/reinspection",
          params: {
            ...this.routerParams,
            companyMessageId: this.options.id,
          },
        });
      } else {
        this.showCheckItem = true;
      }
    },
    open() {},
    close() {
      this.showCheckItem = false;
      this.currentType = "";
    },
    handleSelect(id, checkName) {
      this.currentType = id;
      this.checkName = checkName;
    },
    handleConfim() {
      if (!this.currentType) {
        Toast("请选择检查项！");
        return;
      }
      let item = this.inspectionList.find(
        (item) => item.id === this.currentType
      );
      if (item) {
        this.checkName = item.industry_examine_name;
      }
      navTo({
        url: "/venueInspection/preparationInspection",
        params: {
          companyId: this.options.id,
          checkId: this.currentType,
          companyName: this.detail.companyInfo.companyName,
          checkName: this.checkName,
          companyInfo: this.detail.companyInfo,
          action: this.routerParams.action,
        },
      });
      this.currentType = "";
      this.showCheckItem = false;
    },
    getInspectionCategory() {
      isLoading(true);
      inspectionCategory({
        companyId: this.options.id,
      })
        .then((res) => {
          if (res.code == 200) {
            this.inspectionList = res.result;
          } else {
            Toast(res.message);
          }
        })
        .finally(() => {
          isLoading(false);
        });
    },
    getLastCheckRecord() {
      isLoading(true);
      getAction("/fj/police/check_task/find_task_page", {
        companyId: this.options.id,
        checkType: 1,
        checkResult: "",
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.result.records && res.result.records.length) {
              this.lastRecord = res.result.records.slice(0, 1);
            } else {
              Toast(res.message);
            }
          }
        })
        .finally(() => {
          isLoading(false);
        });
    },
    handleCancel() {
      this.show = false;
      navBack();
    },
    computedSelectHeight() {
      uni
        .createSelectorQuery()
        .select("#p-button")
        .boundingClientRect((rect) => {
          const { height } = rect;

          uni
            .createSelectorQuery()
            .select(".top-title")
            .boundingClientRect((rect) => {
              const { height: titleHeight } = rect;
              this.selectHeieght = this.checkTop - height - titleHeight;
            })
            .exec();
        })
        .exec();
    },
  },
};
</script>

<style>
page {
  width: 100%;
  background-color: #f3f3f3 !important;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.passBusinessDetails {
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  height: 100%;

  .root-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;
  }

  .bgColor {
    width: 100%;
    height: 240rpx;
    background: #2488f5;
    position: absolute;
    top: 0;
    left: 0;
  }

  .wrapper {
    margin-left: auto;
    margin-right: auto;
    padding-top: 30rpx;
    position: relative;
    z-index: 10;
    width: 702rpx;
    overflow-y: scroll;
    // min-height: 0;

    .blueTitle {
      padding: 20rpx 40rpx;
      border-radius: 10rpx 10rpx 0 0;
      background: #ecf9ff;
    }

    .wrapper-item {
      margin-bottom: 1vh;
      padding: 35rpx 40rpx;
      background-color: #ffffff;
      box-shadow: 0px 3px 6px 1px rgba(123, 123, 123, 0.2);
      border-radius: 10rpx;
      width: 702rpx;

      .wrapper-body {
        padding-top: 20px;
      }

      .list-wrapper {
        display: flex;
        font-size: 24rpx;
        flex-wrap: wrap;
        color: #272727;
        bottom: 14.543vh;
        left: 25rpx;

        .item {
          position: relative;
          text-align: center;
          width: 25%;

          .badgeText {
            top: -15rpx;
            right: 18rpx;
          }

          .img {
            margin-bottom: 1vh;
            width: 88rpx;
            height: 88rpx;
          }

          .img-icon {
            margin-bottom: 1vh;
            width: 88rpx;
            height: 88rpx;
          }

          .text {
            color: #343434;
            font-size: 26rpx;
            line-height: 1;
          }
        }

        .funItem:nth-of-type(-n + 8) {
          padding-bottom: 30rpx;
        }
      }

      .text-picture {
        display: flex;
        justify-content: space-between;

        .lt {
          width: 425rpx;
          max-width: 425rpx;

          .name {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: bold;
            margin-bottom: 17rpx;
            margin-top: 20rpx;
          }
        }

        .rt {
          width: 144rpx;
          height: 138rpx;
          margin-left: 20rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .feature-class {
        text-align: center;
        font-size: 24rpx;
        font-weight: 500;
        color: #858894;

        image {
          display: inline-block;
          margin-bottom: 10rpx;
          width: 85rpx;
          height: 50rpx;
        }
      }
    }

    .wrapper-bar {
      display: flex;
      justify-content: space-between;
      height: 40rpx;

      .wrapper-bartitle {
        font-size: 30rpx;
        font-weight: bold;

        text {
          display: inline-block;
          margin-left: 8px;
          color: #ababab;
          font-size: 28rpx;
        }

        image {
          margin-bottom: -3rpx;
          margin-right: 10rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }
    }

    .wrapper-zero {
      border-radius: 0 0 10rpx 10rpx;

      .logout {
        padding: 3rpx 14rpx;
        background: #fef0ef;
        border-radius: 28rpx 28rpx 28rpx 28rpx;
        border: 1rpx solid #eeaaa7;
        font-weight: 500;
        font-size: 20rpx;
        color: #e43d33;
        margin-left: 12rpx;
      }
    }
  }

  .last-check-wrapper {
    background: #ffffff;
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(180, 180, 180, 0.16);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 0 30rpx 27rpx 30rpx;

    .title-text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 28rpx;
      border-bottom: 1rpx solid #e4e4e4;
      height: 87rpx;

      .l-text {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
      }

      .r-wrapper {
        font-weight: 400;
        font-size: 28rpx;
        color: #a1a1a1;
        display: flex;
        align-items: center;
      }
    }

    .c-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .c-label {
        font-weight: 400;
        font-size: 28rpx;
        color: #a1a1a1;
        flex-shrink: 0;
        margin-right: 4rpx;
      }

      .c-value {
        font-weight: 500;
        font-size: 28rpx;
        color: #212020;
      }
    }
  }

  .check-btn {
    width: 100%;
    height: 120rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    // position: absolute;
    // bottom: 0;
    // left: 0;
    // z-index: 11;

    .check-btn-style {
      width: 640rpx;
      height: 80rpx;
      background: #2488f5;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      border: 1rpx solid #306bd9;
      font-weight: 500;
      font-size: 30rpx;
      color: #f9f9f9;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .location-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;

    .l-img {
      width: 246rpx;
      height: 246rpx;
    }

    .l-text {
      font-weight: bold;
      font-size: 36rpx;
      color: #000000;
      margin-top: 44rpx;
      margin-bottom: 30rpx;
    }

    .l-sub-text {
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
    }
  }

  .popup-style {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    overflow: hidden;

    .close-icon {
      position: absolute;
      right: 15rpx;
      top: 15rpx;
      z-index: 20;
    }
  }

  .tenant-info-wrapper {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    width: 100%;
    background: #fff;

    #tenant-info-wrapper-dom {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .top-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 134rpx;
      padding: 0 18rpx;

      .p-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #101010;
      }
    }

    .p-container {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;

      .select-box-wrapper {
        overflow-y: auto;

        .select-box-inner {
          height: 344rpx;
          overflow: auto;
        }
      }

      /deep/.u-radio-group--row {
        flex-direction: column;
      }

      .p-item {
        width: 100%;
        padding: 0 35rpx;
        display: flex;

        .p-item-wrapper {
          display: flex;
          width: 100%;
          justify-content: space-between;
          background: #f9fcff;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          margin-bottom: 20rpx;
          padding: 30rpx 38rpx 27rpx 42rpx;

          .p-name {
            font-weight: bold;
            font-size: 36rpx;
            color: #333333;
            margin-bottom: 16rpx;
          }

          .p-text {
            font-weight: 400;
            font-size: 26rpx;
            color: #bbbbbb;
          }
        }

        .p-active {
          border: 1rpx solid #2488f5;
        }
      }

      .p-button {
        padding: 36rpx 0;
        display: flex;
        justify-content: center;

        /deep/ .u-button__text {
          font-size: 36rpx !important;
        }
      }
    }
  }

  .ccie-details {
    color: #2488f5;
  }

  .sifn-info-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;

    .title-text {
      font-weight: 500;
      font-size: 36rpx;
      color: #ffffff;
      position: absolute;
      z-index: 1;
      top: 38rpx;
      left: 50%;
      transform: translateX(-50%);
    }

    .l-img {
      width: 680rpx;
      height: 328rpx;
      position: absolute;
      left: 0;
      top: -217rpx;
    }

    .company-name {
      padding-top: 50rpx;
      font-weight: bold;
      font-size: 30rpx;
      color: #000;
      padding-top: 161rpx;
      text-align: center;
      margin-bottom: 10rpx;
    }

    .l-text {
      font-weight: 500;
      font-size: 30rpx;
      color: #656565;
      margin-bottom: 60rpx;
      text-align: center;
    }

    .l-sub-text {
      width: 400rpx;
      height: 88rpx;
      background: #2488f5;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      border: 1rpx solid #accbec;
      font-weight: 500;
      font-size: 36rpx;
      color: #f9f9f9;
      text-align: center;
      margin: 0 auto;
      line-height: 88rpx;
      margin-bottom: 70rpx;
    }
  }

  .sign-wait-box {
    /deep/.u-popup {
      .u-modal__content {
        padding: 0 !important;
      }

      .u-popup__content,
      .u-modal {
        overflow: unset !important;
      }
    }
  }
}
</style>
